<style scoped lang="less">
.el-aside {
  height: 400px;
}
.main {
  background: #fff;
  height: 70vh;
  padding: 0 0 0 20px;
}
.footer {
  display: flex;
  flex-direction: row-reverse;
  padding-top: 20px;
  .cancel-button {
    margin-right: 20px;
  }
}
</style>

<template>
	<el-dialog
		:append-to-body="appendToBody"
		:modal="true"
		:modal-append-to-body="true"
		:show-close="false"
		:title="title"
		:visible="true"
		class="multistage"
	>
		<el-container>
			<el-aside class="aside" width="200px">
				<el-tree :data="data" :expand-on-click-node="false" :props="defaultProps" @node-click="nodeClick"/>
			</el-aside>
			<el-main class="main">
				<table-ex
					:columns="tableColumns"
					:on-select="rowSelect"
					:on-select-all="rowSelectAll"
					:on-select-change="onSelectChange"
					:rows="tableRows"
					:total="total"
					class="table"
					ref="mtable"
				/>
			</el-main>
		</el-container>
		<div class="footer">
			<el-button @click="confirm" type="primary">确定</el-button>
			<el-button @click="cancel" class="cancel-button">取消</el-button>
		</div>
	</el-dialog>
</template>

<script>
import tableEx from '@/components/table/tableEx'
import { deepCopy } from '@/utils/util'

export default {
  name: 'multistage',
  components: {
    'table-ex': tableEx
  },
  props: {
    total: {
      type: Number,
      default: 0
    },
    title: {
      type: String,
      default: ''
    },
    appendToBody: {
      type: Boolean,
      defalut: true
    },
    modalCancel: {
      type: Function,
      default: () => {}
    },
    modalConfirm: {
      type: Function,
      default: () => {}
    },
    treeNodeClick: {
      type: Function,
      default: () => {}
    },
    data: {
      type: Array,
      default: () => []
    },
    defaultProps: {
      type: Object,
      default: {}
    },
    tableColumns: {
      type: Array,
      default: []
    },
    tableRows: {
      type: Array,
      default: []
    },
    rowKey: {
      type: String,
      default: 'id'
    },
    initData: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      // 当前tree的node
      node: null,
      // table选择的columns
      rows: null,
      selectRows: [],
      // 过滤筛选check
      toggleSelection: [],
      // 筛选结果对象
      results: []
    }
  },

  mounted() {},

  watch: {
    // 监控tableRows属性变化, 标记选择
    tableRows(newV, oldV) {
      let arr = []
      if (this.initData) {
        for (let item of newV) {
          for (let checkId of this.initData) {
            if (item[this.rowKey] == checkId) {
              arr.push(item)
            }
          }
        }
      }
      if (this.selectRows) {
        for (let item of newV) {
          for (let checkId of this.selectRows) {
            if (item[this.rowKey] == checkId[this.rowKey]) {
              arr.push(item)
            }
          }
        }
      }
      // 等待页面渲染完成
      setTimeout(() => {
        arr.forEach(item => {
          this.$refs.mtable.toggleSelection(item)
        })
      }, 400)
    },
    initData(newV, oldV) {
      // this.results = newV ? newV : []
    }
  },

  methods: {
    cancel(e) {
      this.modalCancel && this.modalCancel(this.rows)
    },
    confirm(e) {
      this.results.push(...this.initData)
      this.results = this.unique(this.results)
      this.modalConfirm && this.modalConfirm(this.results)
    },
    getTreeNodePath(nodeList, currentNode) {
      if (!nodeList) return null
      for (let node of nodeList) {
        if (node.id == currentNode.id) {
          return [node.id]
        }
        let path = this.getTreeNodePath(node.subClasses, currentNode)
        if (path) {
          path.push(node.id)
          return path
        }
      }
    },
    nodeClick(e) {
      this.node = e
      let selectNodePath = this.getTreeNodePath(this.data, e)
      selectNodePath = selectNodePath
        ? selectNodePath.reverse()
        : [this.node.id]
      this.treeNodeClick && this.treeNodeClick(e, selectNodePath)
    },
    rowSelectAll(selection) {
      console.log('rowSelectAll', selection)
      if (!selection || selection.length == 0) {
        const tableRows = this.tableRows.map(row => row.employeeId)
        this.initData = this.initData.filter(
          item => tableRows.indexOf(item) < 0
        )
        this.results = this.results.filter(item => tableRows.indexOf(item) < 0)
      }
    },
    rowSelect(selection, row) {
      console.log('rowSelect', selection)
      // !!isSelect = false 说明被删除
      let isSelect = selection.find(item => {
        if (row[this.rowKey] === item[this.rowKey]) {
          return item
        }
      })

      if (this.initData && this.initData.length) {
        let initSelect = this.initData.find(item => {
          if (row[this.rowKey] === item) {
            return item
          }
        })
        if (!isSelect && initSelect) {
          this.initData &&
            this.initData.splice(this.initData.indexOf(row[this.rowKey]), 1)
        }
      }
      if (this.results && this.results.length) {
        let initSelect = this.results.find(item => {
          if (row[this.rowKey] === item) {
            return item
          }
        })
        if (!isSelect && initSelect) {
          this.results &&
            this.results.splice(this.results.indexOf(row[this.rowKey]), 1)
        }
      }
    },
    unique(value) {
      let res = value.filter((item, index, array) => {
        return array.indexOf(item) === index
      })
      return res
    },
    onSelectChange(rows) {
      this.selectRows.push(...rows)
      this.rows = rows
      // 遍历出所有id
      let selectId = rows.map(item => {
        return item[this.rowKey]
      })
      this.results.push(...selectId)
      // 去重处理
      this.results = this.unique(this.results)
    }
  }
}
</script>
